Facebook Style login page and Registration page using HTML and CSS Script

2023-03-15 23:20| 来源: 网络整理| 查看: 265

Facebook is one the top and most visited social networking website in the world. Every beginners and experienced website developer wanted to know how to design facebook style home page with easy steps.

In this tutorial I am going to explain a simple HTML and CSS coding for creating facebook style home page as well as registration and login option.

Facebook Login Page Output: Download Script Live Demo index.html:

This is the html file for front-end design. Here is the code of this file.

Facebook Style Homepage Design using HTML and CSS Email or Phone keep me logged in Password Forgotten your password? Facebook helps you connect and share with the people in your life. Create an account It's free and always will be. Male Female By clicking Create an account, you agree to our Terms and that you have read our Data Policy, including our Cookie Use. Create a Page for a celebrity, band or business. English (UK) Sign Up Log In © www.coderglass.com ;; Design by Varun Singh style.css:

This file is used to set the every body part and other things on perfect postion.

body{ background-image: url("grid.png"); height:750px; } .fb-header-base{ width:100%; height:90px; position:absolute; top:0; left:0; color:white; z-index:7; font-family:verdana; -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); } .fb-header{ width:100%; height:90px; position:absolute; background:#3d5b99; top:0; left:0; color:white; z-index:7; font-family:verdana; } #img1{ left:178px; height:50px; width:100px; top:25px; } #form1{ left:750px; height:60px; width:180px; top:20px; font-family:verdana; font-size:12px; } #form2{ left:940px; height:60px; width:250px; top:20px; font-family:verdana; font-size:12px; } .submit1{ left:1130px; top:35px; background:#5b7bc0; color:white; position:fixed; z-index:20; height:22px; width:50px; cursor:pointer; } .fb-body{ position:absolute; left:0px; top:90px; width:100%; height:645px; } #intro1{ left:178px; top:20px; font-family:verdana; font-size:20px; color:#142170; height:75px; width:550px; } #intro2{ left:750px; top:20px; font-family:verdana; font-size:30px; color:#000; font-weight:bold; height:75px; width:500px; } #img2{ top:130px; left:178px; width:537px; height:195px; } #intro3{ left:750px; top:70px; font-family:verdana; font-size:18px; color:#000; height:50px; width:300px; } #form3{ top:120px; left:750px; font-family:verdana; font-size:20px; color:#142170; width:450px; height:495px; } #namebox{ width:200px; height:40px; border-radius:5px 5px 5px 5px; background:white; padding:10px; font-size:18px; margin-top:8px; border-width: 1px; border-style:solid; border-color: gray; } #mailbox{ width:408px; height:40px; border-radius:5px 5px 5px 5px; background:white; padding:10px; font-size:18px; margin-top:8px; border-width: 1px; border-style:solid; border-color: gray; } #r-b{ font-size:12px; height:15px; width:15px; } .button2{ width:250px; height:40px; left:750px; top:625px; background:green; font-family:verdana; font-size:18px; color:white; border-radius:5px 5px 5px 5px; border-width: 1px; border-style:solid; border-color: gray; cursor:pointer; outline:none; } #intro4{ font-family:verdana; font-size:12px; color:gray; } #intro5{ font-family:verdana; font-size:14px; color:gray; } .fb-body-footer{ width:100%; position:absolute; left:0px; height:80px; background:white; top:700px; } #fb-body-footer-base{ width:900px; top:15px; left:200px; color:blue; height:60px; } Tags: Php Java Python React Html JavaScript Angular NodeJs JQuery

【本文地址】

公司简介

联系我们